<template>
	<view class="store-info" v-if="store">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			indicator-color="rgba(255, 255, 255, .62)" indicator-active-color="#fff">
			<swiper-item>
				<view class="swiper-item">
					<image :src="store.outPic" mode=""></image>
				</view>

			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image :src="store.innerPic" mode=""></image>
				</view>

			</swiper-item>
		</swiper>

		<text class="title">{{store.storeName}}</text>
		<view class="start">
			<image :src="item>=6 ? '/static/start.png' : '/static/start-act.png'" v-for="item in 5" :key="index"
				mode=""></image>
			<text>5分</text>
		</view>
		<text class="time">营业时间 {{store.businessTime}}</text>
		<view class="distance">
			<view class="left">
				<text class="address">{{store.address}}</text>
				<text class="desc">距您 {{store.distance}}km </text>
			</view>
			<view class="right">
				<view class="" @click="openMap">
					<image src="../../static/daohang.png" mode=""></image>
					<text>导航</text>
				</view>
				<view class="" @click="onCallPhone">
					<image src="../../static/phone.png" mode=""></image>
					<text>电话</text>
				</view>
			</view>
		</view>
	</view>
	<view class="store-service" v-if="serviceList.length">
		<view class="header">
			<text class="title">店铺服务</text>
			<view class="all-service" @click="bindAllService">
				<text>全部服务</text>
				<image src="../../static/right.png" mode=""></image>
			</view>
		</view>
		<scroll-view scroll-x class="scroll">

			<template v-for="(item,index) in serviceList" :key="index">
				<view class="scroll-item" v-if="index<=2" @click="bindServiceInfo(item)">
					<image :src="item.imgUrl" mode=""></image>
					<text class="service-name slh">{{item.name}}</text>
					<text class="amount">￥{{item.salePrice / 100}}</text>
					<text class="unamount">￥{{item.initPrice / 100}}</text>
				</view>
			</template>


		</scroll-view>
	</view>
	<view class="commit" id="header-3" v-if="comment">
		<view class="top">
			<text class="title">用户评价</text>
			<view @click="bindAllComment">
				<text>全部评价</text>
				<image src="../../static/right.png" mode=""></image>
			</view>
		</view>
		<view class="commit-list">
			<view class="commit-item">
				<view class="user">
					<image src="" mode=""></image>
					<view class="">
						<text class="nickName">1884138532</text>
						<text class="time">2024.05.01</text>
					</view>
				</view>
				<view class="content">

					<view class="commit-start">
						<text>满意度</text>
						<image :src="item>=3 ? '/static/start.png' : '/static/start-act.png'" v-for="item in 5"
							:key="index" mode=""></image>
						<text style="color: #FE9B23;margin-left: 10rpx;">5分</text>
					</view>
					<text class="commit-content">服务很认真，
						老板人很好，很热情，环境不错，还会再来。
						服务很认真，
						老板人很好，很热情，环境不错，还会再来。
					</text>
				</view>
				<view class="pics">
					<image src="" v-for="(item,index) in 3" :key="index" mode=""></image>
				</view>
			</view>
		</view>
	</view>
	<view class="remark" v-if="store">
		<text class="title">门店简介</text>
		
		<view class="remark-content">
			<rich-text :nodes="formatRichText(store.remark)"></rich-text>
			<!-- <text>{{formatRichText(store.remark)}}</text> -->
		</view>
	</view>
	<view class="footer-fix" v-if="serviceList.length">
		<view class="content">
			<view class="price">
				<text class="amount">{{serviceList[0].salePrice/100}}元</text>
				<text class="unamount">原价({{serviceList[0].initPrice/100}}元)</text>
			</view>
			<button class="btn" @click="submit">立即购买</button>
		</view>
	</view>
</template>

<script setup>
	import {
		storeInfo,
		evaluate,
		getManyProductInfo,
		orderPreService
	} from '@/api'
	import {
		onLoad,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import {
		wxOpenid
	} from '@/utils/login-sdk.js'
	onLoad((params) => {
		getData(params.id)
	})
	
	const store = ref()
	const comment = ref()
	const serviceList = ref([])
	const getData = (id) => {
		uni.getLocation({
			type: 'wgs84',
			success: async (res) => {
				const city = await storeInfo({
					lot: res.longitude,
					lat: res.latitude,
					businessType: "2",
					id
				})
				store.value = city.result

				const newCommment = await evaluate({
					storeId: store.value.id
				})

				comment.value = newCommment.result
				const service = await getManyProductInfo({
					storeId: store.value.id,
					businessType: "4"
				})
				serviceList.value = service.result
			},
			fail: (err) => {
				uni.showModal({
					title: '位置授权提示',
					content: '打开定位失败，您可以检查手机定位是否开启后手动进行位置授权'
				})
			}
		});
	}


	const formatRichText = (content) => {
		// 将所有的 "px" 替换为 "rpx"
		let newrichtext = content.replace(/px/g, 'rpx');

		// 处理 <img> 标签的样式
		newrichtext = newrichtext.replace(/<img.*?style="(.*?)"/g, (match, styleContent) => {
			const updatedStyle = styleContent.replace(/px/g, 'rpx');
			return `<img style="${updatedStyle}"`;
		});

		// 处理段落 <p> 标签的字体大小
		newrichtext = newrichtext.replace(/<p style=".*?font-size: (\d+)px(.*?)"/g, (match, fontSize, rest) => {
			return `<p style="font-size: ${fontSize}rpx${rest}"`;
		});

		// 处理 HTML 实体字符
		newrichtext = newrichtext.replace(/&(lt|gt|nbsp|amp|quot);/g, (match, entity) => {
			const entities = {
				'lt': '<',
				'gt': '>',
				'nbsp': ' ',
				'amp': '&',
				'quot': '"'
			};
			return entities[entity];
		});

		return newrichtext;
	}

	/** 全部评价 */
	const bindAllComment = () => {
		uni.navigateTo({
			url: "/pages/allComment/allComment"
		})
	}
	/** 全部服务*/
	const bindAllService = () => {
		uni.navigateTo({
			url: "/pages/allService/allService?storeId=" + store.value.id
		})
	}
	/** 服务详情 */
	const bindServiceInfo = (item) => {
		uni.navigateTo({
			url: "/pages/serviceInfo/serviceInfo?id=" + item.id
		})
	}
	/** 立即购买 */
	const submit = async () => {
		const {
			memberId
		} = await wxOpenid()
		const res = await orderPreService({
			memberId: memberId,
			productInfoId: serviceList.value[0].id
		})
		uni.navigateTo({
			url: "/pages/pay/pay?preOrderId=" + res.result.preOrderId + '&token=' + res.result.token +
				'&orderAmount=' + serviceList.value[0].salePrice + '&businessType=4'
		})
	}
	/** 打电话 */
	const onCallPhone = () => {
		uni.makePhoneCall({
			phoneNumber: store.value.phone //仅为示例
		});
	}
	/** 打开电话 */
	const openMap = () => {
		uni.openLocation({
			latitude: Number(store.value.lat),
			longitude: Number(store.value.lot),
			success: function() {
				console.log('success');
			}
		});
	}
</script>

<style lang="scss">
	page {
		background: #F8F5F0;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}

	.store-info {
		margin: 30rpx auto;
		width: 702rpx;
		background: #fff;
		border-radius: 36rpx;
		padding-bottom: 30rpx;

		.swiper {
			width: 702rpx;
			height: 330rpx;
			margin: 18rpx auto 30rpx;

			.swiper-item {

				image {
					display: block;
					width: 702rpx;
					height: 330rpx;

					border-radius: 36rpx;
				}
			}
		}

		.title {
			color: #16191B;
			font-weight: bold;
			font-size: 30rpx;
			display: block;
			margin-left: 44rpx;
		}

		.start {
			display: flex;
			align-items: center;
			margin-left: 44rpx;
			margin-top: 12rpx;
			margin-bottom: 12rpx;

			image {
				display: block;
				width: 22rpx;
				height: 22rpx;
			}

			text {
				font-size: 22rpx;
				color: #FE9B23;
				margin-left: 15rpx;
			}
		}

		.time {
			margin-left: 44rpx;
			display: block;
			color: #8E8E8E;
			font-size: 26rpx;
		}

		.distance {
			width: 630rpx;
			height: 171rpx;
			background: #F6F6F6;
			border-radius: 21rpx;
			margin: 30rpx auto;
			display: flex;
			justify-content: space-between;

			.left {
				margin: 44rpx 0 0 37rpx;

				.address {
					color: #16191B;
					font-size: 28rpx;
					margin-bottom: 10rpx;
					display: block;
				}

				.desc {
					color: #FE9C24;
					font-size: 26rpx;
				}
			}

			.right {
				display: flex;

				view {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 37rpx;

					image {
						width: 34rpx;
						height: 34rpx;
						display: block;
					}

					text {
						font-size: 26rpx;
						color: #16191B;
					}
				}
			}
		}
	}

	.store-service {
		margin: 30rpx auto;
		width: 702rpx;
		background: #fff;
		border-radius: 36rpx;
		padding-bottom: 30rpx;
		overflow: hidden;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0;

			.title {
				color: #16191B;
				font-weight: bold;
				font-size: 30rpx;
				display: block;
				margin-left: 44rpx;
			}

			.all-service {
				display: flex;
				align-items: center;
				margin-right: 44rpx;

				image {
					display: block;
					width: 38rpx;
					height: 38rpx;
				}

				text {
					font-size: 26rpx;
					color: #A5A5A5;
				}
			}

		}

		.scroll {
			margin-left: 44rpx;
			width: 600rpx;
			white-space: nowrap;

			.scroll-item {
				width: 250rpx;
				display: inline-block;
				background: #FFFFFF;
				border-radius: 16rpx;
				border: 1px solid #D2D2D2;
				margin-right: 20rpx;
				padding-bottom: 20rpx;

				image {
					width: 250rpx;
					height: 185rpx;

					border-radius: 16rpx 16rpx 0 0;
					display: block;
					margin-bottom: 18rpx;

				}

				.service-name {
					width: 210rpx;
					margin: 0 auto;
					font-size: 28rpx;
					color: #16191B;
					display: block;
				}

				.amount {
					display: block;
					font-weight: bold;
					font-size: 30rpx;
					color: #ED4538;
					margin: 50rpx 0 0 22rpx;
					line-height: 1;
				}

				.unamount {
					font-size: 26rpx;
					color: #8E8E8E;
					line-height: 1;
					margin-left: 22rpx;
					text-decoration: line-through;
				}

			}
		}
	}

	.commit {
		width: 622rpx;
		padding: 40rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		margin: 16rpx auto;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 30rpx;
				color: #16191B;
				font-weight: bold;
			}

			view {
				display: flex;
				align-items: center;

				text {
					font-size: 26rpx;
					color: #A5A5A5;
				}

				image {
					display: block;
					width: 38rpx;
					height: 38rpx;
				}
			}
		}

		.commit-list {
			margin-top: 30rpx;

			.commit-item {
				.user {
					display: flex;
					align-items: center;
					margin-bottom: 35rpx;

					image {
						display: block;
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
						background: pink;
						margin-right: 14rpx;
					}

					view {
						flex: 2;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.nickName {
							font-size: 30rpx;
							color: #16191B;
							display: block;
							margin-top: 16rpx;
						}

						.time {
							font-size: 22rpx;
							color: #A5A5A5;
							display: block;
						}
					}
				}

				.content {
					.commit-start {

						display: flex;
						align-items: center;

						margin-top: 12rpx;
						margin-bottom: 12rpx;

						image {
							display: block;
							width: 22rpx;
							height: 22rpx;

						}

						text {
							font-size: 26rpx;
							color: #424446;
							margin-right: 10rpx;
						}
					}


					.commit-content {
						font-size: 30rpx;
						color: rgba(66, 68, 70, 1);

					}
				}

				.pics {
					margin-top: 30rpx;
					display: flex;
					flex-wrap: wrap;
					margin-right: -20rpx;

					image {
						width: 202rpx;
						height: 202rpx;
						display: block;
						margin-right: 10rpx;
						background: pink;
					}
				}
			}
		}
	}

	.remark {
		margin: 30rpx auto;
		width: 702rpx;
		background: #fff;
		border-radius: 36rpx;
		padding-bottom: 30rpx;
		overflow: hidden;

		.title {
			color: #16191B;
			font-weight: bold;
			font-size: 30rpx;
			display: block;
			margin-left: 44rpx;
			margin-top: 39rpx;
			margin-bottom: 33rpx;
		}

		.remark-content {
			font-size: 26rpx;
			color: #424445;
			display: block;
			width: 608rpx;
			margin: 0 auto;
		}
	}

	.footer-fix {
		width: 748rpx;
		height: 166rpx;

		.content {
			background: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			width: 750rpx;
			height: 166rpx;
			display: flex;
			justify-content: space-between;

			.price {
				margin-left: 30rpx;
				margin-top: 30rpx;

				.amount {
					color: #FE9C26;
					font-weight: bold;
					display: block;
					font-size: 34rpx;
				}

				.unamount {
					color: #A8A8A8;
					font-size: 28rpx;
					display: block;
					text-decoration: line-through;
				}
			}

			.btn {
				width: 210rpx;
				height: 70rpx;
				background: #FE9C26;
				border-radius: 35rpx;
				font-size: 28rpx;
				color: #FFFBF6;
				line-height: 70rpx;
				margin-top: 30rpx;
				margin-right: 30rpx;
			}
		}


	}
</style>